<template>
	<el-col :span="componentModel.col*6" v-show="visible">
		<el-row>
			<el-col :span="currentComponentModel.labelCol" class="field-label-div" v-if="!componentModel.noLabel">
				<label class="field-label">{{componentModel.label}}</label>
			</el-col>
			<el-col :span="currentComponentModel.fieldcol">
				<el-checkbox-group v-model="valueList" @change="onChangeHandler()" :disabled="readonly">
					<el-checkbox v-for="(item,index) in selectItemList" :key="index" :label="item.value">{{item.name}}
					</el-checkbox>
				</el-checkbox-group>
			</el-col>
		</el-row>
	</el-col>

</template>

<script>
	import {
		sendComponentValueChangeRequest
	} from '@/utils/requestUtils.js';
	import utils from '@/utils/utils.js';
	export default {
		name: "CheckboxListComponent",
		props: ["componentModel", "scope", "options"],
		data() {
			return {
				selectItemList: [],
				valueList: [],
				vue_model: "",
				visible: true,
				readonly: false,
				label: "",
				"currentComponentModel": this.componentModel
			}
		},
		beforeMount() {
			if (this.componentModel.col == 4) {
				this.currentComponentModel.labelCol = 4;
				this.currentComponentModel.fieldcol = 20;
			} else {
				this.currentComponentModel.labelCol = 8;
				this.currentComponentModel.fieldcol = 16;
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
			if (this.options != undefined) {
				this.selectItemList = this.options;
			}
		},
		beforeUnmount() {
			utils.removeArrayElement(this.children, this);
		},
		methods: {
			setProp(prop) {
				var options = prop["options"];
				var value = prop["value"];
				if (value !== undefined) {
					if (value == null) {
						value = "";
						this.valueList = [];
					} else {
						this.valueList = value.split(",");
					}
				}
				if (options !== undefined) {
					this.selectItemList = options;
				}
				for (var k in prop) {
					if (k == "visible") {
						this.visible = prop[k];
					} else if (k == "readonly") {
						this.readonly = prop[k];
					} else if (k == "label") {
						this.label = prop[k];
					}
				}
			},
			getValue() {
				return this.valueList.join(",");
			},
			onChangeHandler() {
				if (this.scope != undefined) {
					this.$emit("onValueChange", this);
					return;
				}
				sendComponentValueChangeRequest(this);
			}
		}
	}
</script>

<style>
	
</style>
